<style>
	.pagetitle { width: 100%; text-align: center; color: darkorange; text-shadow: 1px 1px 5px #999;}
	.item { width: 60px; font-size: 14px; font-weight: 600; color: #666666; cursor: pointer; }
	.item:hover { color: red;}
	.item.choosed { color: darkorange;}
	
	.cities, .types{width: 100%; height: 32px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; }
	.types { justify-content: space-around; margin: 30px 0; font-size: 14px; color: #2C405A;}
	.city, .type { text-align: center;}
	
	.periods { width: 100%; height: 32px; margin-top: 15px; }
	.periodsleft { width: 340px; margin-left: 10px; border-right: 1px solid #cccccc;}
	.periodsleft .item { width: 50px;}
	.periodsright { margin-left: 10px;}
	.periodsright input { width: 130px; height: 28px; background: none; border: none; border-bottom: solid 1px #cccccc; text-indent: 4px; }
	.begin2end { font-size: 14px; ; }
	.time { font-size: 12px; font-weight: bold; margin-left: 15px; cursor: pointer; width: 90px; }
	.waiting { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); }
	.waiting > div { width: 200px; height: 40px; font-size: 60px; font-weight: bolder; color: darkorange; text-shadow: 0 0 6px #555555; margin: 300px auto;}	
	.memo { font-size: 10px; margin-left: 5%;}
</style>
<section>
	<div id="vm">
		<h4 class="pagetitle">门店排序</h4>
		<div class="cities line">
			<div class="city item" :class="city == 'nation' ? 'choosed':''" @click="city = 'nation'">全国</div>
			<div v-for="(item, i) in cities" class="city item" :class="item.city == city ? 'choosed' : ''" @click="city = item.city">{{item.city}}</div>
		</div>
		<div class="periods line" v-show="type > 0"> 
			<div class="periodsleft line">
				<div v-for="item in periods" :class="'period item ' + (period == item ? 'choosed' : '') " @click="chooseperiod(item)">{{item}}</div>
			</div>
			<div class="periodsright line">
				<div class="begin2end" v-if="period == '自定义'">自<input type="date" v-model="begintime">至<input type="date" v-model="endtime"><button @click="gymlist()">查询</button></div>
				<div class="begin2end" v-else-if="period != '每日'">自 {{begintime}} 至 {{endtime}} | </div>
				<div class="time item" v-if="period != '自定义' && period != '累计'" v-for="(val, i) in times" :class="curtime == i ? 'choosed' : ''" @click="choosetime(i)">{{val.desc}}</div>
			</div>
		</div>
		<div class="types line">
			<div class="type item" v-for="(item, i) in types" :class="i == type ? 'choosed' : ''" @click="type = i">{{item.name}}</div>
		</div>
		<v-table
			style="width: 100%; margin-top: 2px;"
			:height="500"
			is-horizontal-resize
			is-vertical-reaize
			:is-loading="isLoading" 
			:columns="columns"
			:table-data="tabledatas" 
			row-hover-color="#fff" 
			sort-always
		></v-table>
	</div>
</section>
<script>
	var vm = new Vue({
		el: '#vm',
		data: {
			cities: [],  city: C.city,
			types: [
				{name: '累计签约', val: 'users'}, {name: '签约数', val: 'signs'},  {name: '收入', val: 'incomes'}, 
				{name: '新增会员', val: 'newusers'},  {name: '转化人数', val: 'zk_users'},  {name: '续约人数', val: 'xk_users'}, 
				{name: '转化率', val: 'zh_rate'},  {name: '续课率', val: 'xk_rate'},  {name: '60留存', val: 'remain60'}, 
			], 
			type: 0,
			time: rd.dateAdd(new Date(), 0),
			periods: ['每日', '每周', '每月', '每年', '累计', '自定义'],
			period: '每日',
			times: [], // 时间需倒排, 最前面的即为最晚的时间, 并由此计算出 begindate 和 enddate
			curtime: 0,  // 记录times中的当前值的下标
			begintime: rd.dateAdd(new Date(), -7),
			endtime: rd.dateAdd(new Date(), 0),
			tabledatas: [],
			columns: [
				{field: "order", title: "排名", width: 60, titleAlign: 'center', columnAlign:'center', isResize: true, isFrozen: true},
				{field: "city", title: "城市", width: 60, titleAlign: 'center', columnAlign:'center', isResize: true, isFrozen: true},
				{field: "", title: "时段", width: 60, titleAlign: 'center', columnAlign: 'center', isResize: true, isFrozen: true, formatter: function(d){return  vm.type == 0 ? '累计' : vm.begintime + ' 至 ' + vm.endtime}},
				{field: "gymname", title: "门店", width: 120, titleAlign: 'center', columnAlign:'center', isResize: true, isFrozen: true},
				{field: "s", title: "签约数", width: 60, titleAlign: 'center', columnAlign:'center', isResize: true, isFrozen: true},
			],
<<<<<<< HEAD

=======
			getdata: {
				
			},
>>>>>>> cba9cafd673f42ad5454652a82cea5b5ef9bdc87
			isLoading: false,
		},
		methods:{
			gymlist: function(){
				let that = this;
				let type = this.types[this.type].val;
				this.isLoading = true;
				this.columns[4].title = this.types[this.type].name;
				$.post('/data/post/ksap/gyms/' + type, {city: this.city, begintime: this.begintime, endtime: this.endtime}, function(r){
					console.log(r.data)
					that.tabledatas = r.data.map(function(item, i){
						console.log(item)
						console.log(i)
						item.order = '第 ' + (i + 1) + ' 名';
						return item;
					});
					that.isLoading = false;
				})

			},
			chooseperiod: function(i){
				this.period = i;
				this.curtime = 0;
				if(i == '每日'){
					this.times = [];
					for(let j = -1; j >= -7; j--){
						this.times.push({desc: rd.dateAdd(new Date(), j), begin: rd.dateAdd(new Date(), j), end: rd.dateAdd(new Date(), j + 1)})
					}
					this.choosetime(0);
				}
				if(i == '每周'){
					this.times = rd.weeksList(6);
					this.choosetime(0);
				}
				if(i == '每月'){
					this.times = rd.monthsList(6);
					this.choosetime(0);
				}
				if(i == '每年'){
					this.times = rd.yearsList(2015);
					this.choosetime(0);
				}
				if(i == '累计'){
					this.begintime = '2015-01-01';
					this.endtime = rd.dateAdd(new Date(), -1);
				}
				
			},
			choosetime(i){
				this.curtime = i;
				this.begintime = this.times[i].begin;
				this.endtime = this.times[i].end;
			},
		},
		watch: {
			city: function(){if(this.isLoading) return; this.gymlist()},
			type: function(){if(this.isLoading) return; this.gymlist()},
			begintime: function(){if(this.isLoading) return; this.gymlist()},
			endtime: function(){if(this.isLoading) return; this.gymlist()},
		},
		mounted: function(){
			var that = this;
			this.chooseperiod(this.period)
<<<<<<< HEAD
			$.post('/data/post/ksap/gyms/cities', function(r){
				console.log(r)
				that.cities = r.data
=======
			post(dataDomain + 'data/post.php/ksap/gyms/cities', {}, function(){
				that.cities = r
>>>>>>> cba9cafd673f42ad5454652a82cea5b5ef9bdc87
				that.gymlist()
			})
			
		}
	})
</script>